<script lang="ts" setup>
import ChildParams from "./childParams.vue";
// 父组件通过v-bind绑定一个数据，然后子组件通过defineProps接受传过来的值，
import { ref, reactive } from "vue";
let num = reactive<number[]>([1, 2, 3, 4]);
let title = ref("标题");
const changeTitle = () => {
  title.value += "嘿嘿";
  console.log(title.value);
};
const changeNum = () => {
  num.push(1);
};
const getList = (params: string) => {
  console.log("params", params);
};


//  父组件通过ref实例获取子组件暴露的值
const child = ref(null)
const handleChild = () => {
    console.log("child",child["value"]?.list);
    console.log("child",child?.value?.count);
    child?.value?.logHello()
}
</script>
<template>
  <child-params ref="child" :data="num" :title="title" @on-click="getList"></child-params>
  <div>
    <button @click="changeTitle">修改标题</button>
    <button @click="changeNum">修改num</button>
  </div>
  <div>
      <button @click="handleChild"> 调用子组件方法</button>
  </div>
</template>
